
<template>
    <div>
        <div class="page-container">
            <div class="handle-box">
                <span style="padding:8px;">赛事名称：</span>
                <el-input v-model="query.name"
                          placeholder="赛事名称"
                          class="handle-input mr10"></el-input>
                <span style="padding:8px;"></span>
                <el-button type="success"
                           icon="el-icon-search"
                           size="medium"
                           @click="handleSearch">搜索</el-button>
                <el-button type="warning"
                           icon="el-icon-refresh-left"
                           size="medium"
                           @click="resultClick()">重置</el-button>
            </div>
            <el-table :data="tableData"
                      border
                      class="table"
                      ref="multipleTable"
                      header-cell-class-name="table-header"
                      @selection-change="handleSelectionChange">
                <el-table-column label="序号"
                                 align="center"
                                 width="100"
                                 fixed>
                    <template slot-scope="scope">{{scope.$index+(query.pageIndex - 1) * query.pageSize + 1}}</template>
                </el-table-column>
                
                <el-table-column label="赛事名称"
                                 align="center">
                    <template slot-scope="scope">{{scope.row.title}}</template>
                </el-table-column>
                <el-table-column label="关联评委"
                                 align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.person_list">
                            <span style="padding:0 6px;" v-for="v in scope.row.person_list" :key="v.id">{{v.nickname}}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作"
                                 width="220"
                                 align="center">
                    <template slot-scope="scope">
                        <el-button type="text"
                                   icon="el-icon-circle-plus-outline"  @click="relation(scope.row)">关联评委</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background
                               layout="total, prev, pager, next"
                               :current-page="query.pageIndex"
                               :page-size="query.pageSize"
                               :total="pageTotal"
                               @current-change="handlePageChange"></el-pagination>
            </div>
        </div>
        <!-- 编辑弹出框 -->
        <el-dialog title="添加关联展会管理人员"
                   :visible.sync="dialog"
                   width="50%">
            <div>
                <div style="padding:20px;">
                    <el-checkbox-group v-model="customer_manager" size="small">
                        <el-checkbox style="margin:0 10px 10px 0;" :label="item.id" border v-for="item in personList">{{item.realname}}</el-checkbox>
                    </el-checkbox-group>
                </div>
            </div>
            <div class="list-group flex flex-align flex-center">
                <el-button type="primary"
                           icon="el-icon-document-add"
                           size="medium"
                           @click="saveEdit">提交</el-button>
                <el-button type="danger"
                           icon="el-icon-document-add"
                           size="medium"
                           @click="dialog=false">取消</el-button>
            </div>
        </el-dialog>
    </div>

</template>

<script>
    export default {
        name: 'exhibitionDist',
        data () {
            return {
                tags:[],
                personList: [],
                customer_manager:[],
                dialogTitle:'',
                dialog: false,
                loading: false,
                itemList: [],
                delIdArr: [],
                query: {
                    name: '',
                    pageIndex: 1,
                    pageSize: 20
                },
                tableData: [],
                multipleSelection: [],
                delList: [],
                editVisible: false,
                pageTotal: 0,
                form: {},
                idx: -1,
                id: -1,
                value1: '',
                value2: '',
                addOrEdit: 1,//1代表保存2代表编辑
                itemId: '',
                relationId:''
            };
        },
        created () {
            this.initAjaxMethod();
            this.itemAjaxPerson()
        },
        methods: {
            //关联展会管理人员
            relation(data){
                this.relationId=data.id;
                this.dialog=true;
                this.customer_manager=[];
            },
            //重置
            resultClick () {
                this.query.name = '';
                this.query.pageIndex = 1;
                this.initAjaxMethod()
            },
            //人员列表
            itemAjaxPerson () {
                this.$http.post(this.$API.DISTRIBUTION_JUDGESLIST)
                    .then((res) => {
                        console.log('管理员列表', res.data)
                        if (res.code == 1) {
                            this.personList = Array.isArray(res.data)?res.data:[];
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                    .catch((err) => {
                        this.$message.error(err.msg);
                    })
            },
            //列表加载
            initAjaxMethod () {
                const loading = this.$loading({ text: '加载中...' });
                let data = {
                    page: this.query.pageIndex,
                    pageSize:this.query.pageSize,
                    keyword: this.query.name
                };
                this.$http.post(this.$API.DISTRIBUTION_LIST, data)
                    .then((res) => {
                        loading.close();
                        console.log('展商列表', res)
                        if (res.code == 1) {
                            this.tableData = res.data.list;
                            this.pageTotal = res.data.count;
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                    .catch((err) => {
                        this.$message.error(err.msg);
                    })
            },
            saveEdit(){
                this.$http.post(this.$API.DISTRIBUTION_EDIT, { pIds:this.customer_manager.join(','),id:this.relationId})
                    .then((res) => {
                        console.log('管理员列表', res.data)
                        if (res.code == 1) {
                            this.dialog=false;
                            this.$message.success('操作成功！');
                            this.initAjaxMethod()
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                    .catch((err) => {
                        this.$message.error(err.msg);
                    })
            },
            // 触发搜索按钮
            handleSearch () {
                this.$set(this.query, 'pageIndex', 1);
                this.initAjaxMethod();
            },
            // 多选操作
            handleSelectionChange (val) {
                this.multipleSelection = val;
            },
            delAllSelection () {
                let arr = [];
                this.multipleSelection.forEach(item => {
                    arr.push(item.id)
                });
                this.delIdArr = arr;
                this.$confirm('确定要删除吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.delAjaxMethod()
                }).catch(() => { });
            },
            // 分页导航
            handlePageChange (val) {
                this.$set(this.query, 'pageIndex', val);
                this.initAjaxMethod();
            },
            handleClose () {
                this.dialog = false
            },
        }
    };
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: auto;
        display: inline-block;
    }
    .table {
        width: 100%;
    }
    .red {
        color: #f56c6c;
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
    .demo-drawer__content {
        margin: 0 auto;
        width: 80%;
        border: 1px solid #fafafa;
    }
</style>
